<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-suffix="：" size="small">
      <app-main-sub-title title="店铺设置" :button-text="buttonText" @getFlag="(e) => { buttonText = e ? '展开' : '收起' }" />
      <transition name="slide">
        <div v-show="buttonText === '收起'" style="width: 100%;padding-left: 80px">
          <el-form-item label="店铺概况" class="description" prop="description">
            <div v-for="(item, index) in form.description" :key="index" style="margin-bottom: 10px">
              <el-tooltip effect="dark" content="限6个字" placement="top">
                <el-input v-model="item[0]" maxlength="6" show-word-limit placeholder="标题，如店铺面积" clearable />
              </el-tooltip>
              <el-tooltip effect="dark" content="限15个字" placement="top">
                <el-input v-model="item[1]" maxlength="15" show-word-limit placeholder="说明，如200平米" clearable />
              </el-tooltip>
              <el-button v-if="index" type="text" @click="deleteDescription(index)">删除
              </el-button>
            </div>
            <el-button
              size="mini"
              icon="el-icon-plus"
              type="primary"
              style="margin-top: 10px; width: 410px"
              @click="addDescription"
            >新增</el-button>
          </el-form-item>
          <el-form-item label="店铺标签" class="shopLabel">
            <div style="margin-bottom: 10px">
              <el-tag v-for="(item, index) in form.shopLabel" :key="index" closable @close="handleClose(index)">{{ item
              }}</el-tag>
            </div>
            <el-tooltip effect="dark" :content="isStartLimitTooltip" placement="top">
              <el-input
                v-model.trim="tagValue"
                type="text"
                maxlength="8"
                style="width: 300px"
                placeholder="请输入内容按Enter键添加"
                clearable
                @keyup.enter.native="addShopLabel"
              />
            </el-tooltip>

          </el-form-item>
          <el-form-item label="店铺设施" />
          <div
            style="width: 100%;padding-left: 60px"
          >
            <el-form-item
              v-for="(item, index) in form.supplyFacility"
              :key="'supplyFacility' + index"
              :label="item.label"
            >
              <el-checkbox-group v-if="item.label !== '其它设施'" v-model="item.checkList">
                <el-checkbox v-for="(v, i) in item.groupList" :key="i" :label="v" />
              </el-checkbox-group>
              <div v-else>
                <div>
                  <el-tag v-for="(v, i) in item.checkList" :key="i" closable @close="del(item.checkList, i)">{{ v }}
                  </el-tag>
                </div>
                <el-input
                  v-model.trim="supplyServiceInput"
                  type="text"
                  style="width: 300px"
                  maxlength="30"
                  placeholder="请输入内容按Enter键添加"
                  @keyup.enter.native="addCustom('service', item)"
                />
              </div>
            </el-form-item>
          </div>

          <el-form-item label="店铺服务" />
          <div
            style="width: 100%;padding-left: 60px"
          >
            <el-form-item v-for="(item, index) in form.supplyService" :key="'supplyService' + index" :label="item.label">
              <el-checkbox-group v-if="item.label !== '其它服务'" v-model="item.checkList">
                <el-checkbox v-for="(v, i) in item.groupList" :key="i" :label="v" />
              </el-checkbox-group>
              <div v-else>
                <div>
                  <el-tag v-for="(v, i) in item.checkList" :key="i" closable @close="del(item.checkList, i)">{{ v }}
                  </el-tag>
                </div>
                <el-input
                  v-model="supplyFacilityInput"
                  type="text"
                  style="width: 300px"
                  maxlength="30"
                  placeholder="请输入内容按Enter键添加"
                  clearable
                  @keyup.enter.native="addCustom('facility', item)"
                />
              </div>
            </el-form-item>
          </div>
        </div>
      </transition>
    </el-form>
  </div>
</template>

<script>
import { saveShopManageOtherConfig } from '@/api/shop'
import { supplyService, supplyFacility } from '../config'
export default {
  props: {
    configForm: {
      type: Object,
      require: true,
      default: () => { }
    }
  },
  data() {
    return {
      /**
       * 表单校验字段相关
       */
      rules: {
        description: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      // 配置
      // 数据
      supplyServiceInput: '',
      supplyFacilityInput: '',
      form: {
        supplyService: [],
        supplyFacility: []
      },
      tagValue: '',
      buttonText: '收起',
      buttonTextStore: '收起',
      isStartLimitTooltip: '限6个标签，每个标签8个字'
    }
  },
  methods: {
    /**
     * 获取数据
     */
    // 设置表单初始数据
    initData() {
      this.form.supplyService = JSON.parse(JSON.stringify(supplyService))
      this.form.supplyFacility = JSON.parse(JSON.stringify(supplyFacility))
      const configForm = Object.assign({}, this.form.configForm)
      if (Object.keys(configForm.supplyService).length !== 0) {
        this.form.supplyService.forEach((item, index) => {
          configForm.supplyService.forEach((v, i) => {
            if (item.label === v.label) {
              item.checkList = v.checkList
            }
          })
        })
      }
      if (Object.keys(configForm.supplyFacility).length !== 0) {
        this.form.supplyFacility.forEach((item, index) => {
          configForm.supplyFacility.forEach((v, i) => {
            if (item.label === v.label) {
              item.checkList = v.checkList
            }
          })
        })
      }
    },

    /**
     * 按钮组
     *
     */
    // 保存

    getQuery() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          const params = Object.assign({}, this.form)
          params.supplyService = JSON.stringify(params.supplyService)
          params.supplyFacility = JSON.stringify(params.supplyFacility)
          // 门店概况 二维数组 str格式:  左边:右边;左边:右边;arr格式[['', '']]
          if ((params.description[0][0] && params.description[0][1]) === '') return this.$message.error('请输入店铺概况')
          if (params.description.length > 0) {
            let description = ''
            params.description.forEach(v => {
              const str = v.join(':')
              description += str + ';'
            })
            params.description = description
          } else {
            params.description = ''
            this.$message.error('请输入店铺概况')
            return false
          }
          params.shopLabel = params.shopLabel.length > 0 ? params.shopLabel.join(',') : ''
          valid ? resolve(params) : reject(false)
        })
      })
    },
    setQuery(data) {
      this.form = { ...data }
      this.form.shopLabel.forEach((item, index, arr) => !item && arr.splice(index, 1))
      this.initData()
    },

    // 新增自定义
    addCustom(type, item) {
      if (type === 'service' && this.supplyServiceInput) {
        item.checkList.push(this.supplyServiceInput)
        item.checkList = [...new Set(item.checkList)]
        this.supplyServiceInput = ''
      } else if (this.supplyFacilityInput) {
        item.checkList.push(this.supplyFacilityInput)
        item.checkList = [...new Set(item.checkList)]
        this.supplyFacilityInput = ''
      }
    },
    addDescription() {
      this.form.description.push(['', ''])
    },
    addShopLabel() {
      if (this.form.shopLabel.length >= 6) return
      if (!this.tagValue) return
      this.form.shopLabel.push(this.tagValue)
      this.tagValue = ''
    },

    // 删除
    del(item, index) {
      console.log(item, index)
      item.splice(index, 1)
    },

    // 清空数据
    clearForm() {
      this.form.supplyService = JSON.parse(JSON.stringify(supplyService))
      this.form.supplyFacility = JSON.parse(JSON.stringify(supplyFacility))
    },

    deleteDescription(index) {
      index && this.form.description.splice(index, 1)
    },
    handleClose(index) {
      this.form.shopLabel.splice(index, 1)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-checkbox+.el-checkbox {
  margin-left: 0;
}

.el-checkbox {
  margin-right: 20px;
  line-height: 32px;
}

.el-tag {
  margin-right: 10px;
}

.el-tag {
  margin-bottom: 10px;
}

.description {
  .el-input {
    width: 200px;
    margin-right: 10px;
  }
}

.slide-enter-active,
.slide-leave-active {
  transition: all .5s;
}

.slide-enter,
.slide-leave-to {
  margin-left: 20px;
}
</style>
